from DrissionPage import Chromium

tab = Chromium().latest_tab

tab.get("https://seleniumbase.io/demo_page/")

# tab.get("https://www.drissionpage.cn/browser_control/ele_operation")

tab.run_js("""
    // 创建一个小圆点的div元素
        const dot = document.createElement('div');
        dot.id = 'dot';

        // 使用JavaScript动态设置样式
        dot.style.position = 'absolute';
        dot.style.width = '20px';
        dot.style.height = '20px';
        dot.style.backgroundColor = 'red';
        dot.style.borderRadius = '50%'; // 使元素呈圆形
        dot.style.pointerEvents = 'none'; // 防止鼠标事件影响圆点

        // 将圆点元素添加到页面中
        document.body.appendChild(dot);

        // 监听鼠标移动事件
        document.addEventListener('mousemove', function(event) {
            // 获取鼠标位置
            const mouseX = event.pageX;
            const mouseY = event.pageY;

            // 设置圆点的位置
            dot.style.left = `${mouseX-10}px`;
            dot.style.top = `${mouseY-10}px`;
        });
""")


# tab.run_js("document.body.style.backgroundColor='red'")


# btn = tab.ele('x=//button[@id="myButton"]')
# print(btn.text, btn.attr("id"))
# btn.click()

slide = tab.ele('x=//input[@id="mySlider"]')



# tableOfContents_bqdL = tab.ele('x=//div[contains(@class, "tableOfContents_bqdL")]')
# tableOfContents_bqdL.scroll.to_bottom()


# tab.actions.move_to(slide)

# tab.actions.move_to((200, 300))

# print(slide.rect.size, slide.rect.location)

# tab.actions.hold(slide).move(slide.rect.size[0] / -5, 0, 3)

imgs = tab.eles('x=//img')


print(imgs[1].attr("src"))

h4s = tab.eles('x://h4')
print(h4s[0].text)

